<template>
    <div class="title-list">
        <div class="container">
            <ul>
                <li v-for="i in list" :key="i.id" :class="{'active':i.path === path}" @click="fun(i.path)" :style="{'width':width+'px'}">
                    {{i.name}} <span v-if="i.num">({{i.num}})</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "TitleList",
        props:['list','width'],
        data () {
            return {
                // show:true
            }
        },
        methods: {
            fun (path) {
                this.$router.push({path:path})
            }
        },

        computed: {
            path () {
                console.log(this.$route.path);
                return this.$route.path
            }
        },

    }
</script>

<style scoped lang="less">
  .title-list{
      background-color: #ff97a8;
      height: 46px;
      .active{
          background-color: #ff526e;
      }
      ul{
          li{
              float: left;
              width: 172px;
              height: 46px;
              text-align: center;
              line-height: 46px;
              color: white;
              font-size: 16px;
              cursor: pointer;
          }
          li:hover{
              background-color: #ff526e;
          }
      }
  }
</style>